<template>
    <div>
        <h1 align="center">用户登录</h1>
        <el-form :model="form" label-width="4rem">
            <el-form-item label="用户名">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios'
import { postLigin } from '@/http/api.js'
export default {
    data() {
        return {
            form:{}
        }
    },
    methods: {
        login() {
            postLigin(this.form)
            .then(res => {
                console.log(res.data)
                
                if(res.data.code == 200) {
                    sessionStorage.setItem('token', res.data.token)
                    sessionStorage.setItem('username', this.form.username)
                    this.$router.push('/')
                }
            }).catch(error => {
                console.log(error)
            })
        }
    },
    computed: {

    },
    created() {

    }
}
</script>

<style scoped>
.el-form{
    width: 500px;
    margin: 50px auto;
}
</style>
